<template>
  <div class="y-conter">
    <div class="y-biaoge">
      <h3 class="y-bold">劳动力计划投入</h3>
      <!-- 搜索输入框部分 -->
      <div>
        <el-form :inline="true" ref="ruleForm" :model="ruleForm" class="demo-form-inline">
          <el-form-item label="公司名称:">
            <el-select v-model="ruleForm.company_id" placeholder="请选择">
              <el-option
                v-for="item in downinput"
                :key="item.people_id"
                :label="item.company_name"
                :value="item.company_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮搜和索部分 -->
          <el-form-item label="班组名称:">
            <el-select v-model="ruleForm.buildGroup.group_name" placeholder="请选择">
              <el-option
                v-for="item in downinput1"
                :key="item.people_id"
                :label="item.group_name"
                :value="item.group_name"
              ></el-option>
            </el-select>
          </el-form-item>

        
        </el-form>
        <!-- <div class="rygl-btn">
          <div class="rygl-btn-left">
            <el-button type="primary" @click="search(formInline)">搜索</el-button>
            <el-button @click="reset(formInline)">重置</el-button>
            <el-button @click="del(currList)">批量删除</el-button>
          </div>
          <div class="rygl-btn-right">
            <el-button type="primary" @click="addlao()">新增</el-button>
            <el-button>导出</el-button>
          </div>
        </div>-->
      </div>
        <!-- 按钮搜和索部分 -->
        <!-- <div class="l-lao-btn">
         
         
          </div> -->
      <!-- 表格部分 -->
       <div class="rygl-btn">
              <div class="rygl-btn-left">
                <el-button type="primary" @click="searchForm('ruleForm')">搜索</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
             </div>
              <div class="rygl-btn-right">
                <el-button @click="addLabor('ruleForm')" type="primary">新增</el-button>
            </div>
            </div>
      <div class="y-table">
        <el-table
          :border="true"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          ref="multipleTable"
          :data="currList"
          tooltip-effect="dark"
          style="width: 98%, text-align: center "
          @selection-change="handleSelectionChange"
        >
          <!-- 复选框 -->
          <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column label="所属阶段" prop="plan_phase" width="100" align="center"></el-table-column>
          <el-table-column label="劳务班组" prop="buildGroup.group_name" align="center"></el-table-column>

          <el-table-column label="劳务单位" align="center" prop="buildCompany.company_name"></el-table-column>
           <el-table-column label="计划用工时间" align="center" prop="plan_start"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>

    
    </div>
      <!-- 分页器 -->
      <div class="y-fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </div>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    return {
      //搜索输入框
      // 公司名称
      ruleForm: {
        company_id: "",
        buildGroup: {
          group_name: ""
        },
      },
      downinput: [],
      //  班组名称
      downinput1: [],

      //多选表格的复选框
      multipleSelection: [],
      // 分页
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 5, //每页数据量
      currList: [], //当前展示的数据数组

      value1: "",
      value2: "",
    };
  },
  computed: {},
  methods: {
    // 新增
    addLabor() {
      this.$router.push({
        name: "劳动力新增",
        // 明天传参 编辑页面
        // params:row
      });
    },

    // 分页
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      // console.log('当前页',index);
    },
    //改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      // console.log(val);
    },
// buildPlan/delBuildPlan
    //重置按钮
    resetForm(formName) {
      for (const key in this.ruleForm) {
        this.ruleForm[key]=""
      }
      // this[formName] = {};
      // this.$refs[formName].resetFields();
    },

    //表格编辑按钮
    handleEdit(index, row) {
      console.log("这是编辑的", row);
      this.$router.push({
        name: "劳动力编辑",
        params: row,
      });
      // console.log(index, row);
    },

    // handleDelete() {
    //   this.$confirm({
    //     title: "确定删除班组信息吗?",
    //     content: (h) => <div style="color:red;">Some descriptions</div>,
    //     onOk() {
    //      this.tableData.splice((this.currPage - 1) * 6 + index, 1);
    //   if (this.currList.length === 1) {
    //     this.currPage--;
    //     this.setCurrList(this.currPage);
    //   } else {
    //     this.setCurrList(this.currPage);
    //   }
    //     },
    //     onCancel() {
    //       console.log("Cancel");
    //     },
    //     class: "test",
    //   });
    // },
    // 表格删除按钮
    handleDelete(index, row) {
   console.log("单个删除",row.plan_id)
      let shanobj={}
      // let shanobjarr=[]
      // shanobjarr.push(row.plan_id)
      shanobj.plan_id=row.plan_id
       console.log("单个删除obj",shanobj)
      http.ldelBuildPlan(shanobj).then((res)=>{
        console.log('劳动力删除',res.data)
         http.getBuildPlanList({}).then((r) => {
      console.log(r);
      this.tableData = r.data;
      this.setCurrList(1);
      console.log("表格", this.tableData);
    });

      })
      // this.tableData.splice((this.currPage - 1) * 6 + index, 1);
      // if (this.currList.length === 1) {
      //   this.currPage--;
      //   this.setCurrList(this.currPage);
      // } else {
      //   this.setCurrList(this.currPage);
      // }
      // console.log(index, row);
    },
    //选中复选框获取下标
    handleSelectionChange(val) {
    
      // this.multipleSelection = val;
      // let ids = [];
      // this.multipleSelection.map((item) => {
      //   ids.push(item.key);
      // });
      // this.selectedIDs = ids;
      // console.log("你点击的是", this.selectedIDs);
    },

    //搜索输入
    // 提交
    searchForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          http.getBuildPlanList(this.ruleForm).then((r) => {
            console.log(r);
            this.tableData = r.data;
            this.setCurrList(1);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // search(ruleForm) {
    //   http.getBuildPlanList({}).then((r) => {
    //     console.log(r);
    //     this.downinput = r.data;
    //     console.log("公司", this.downinput);
    //   });
    //   // var shuju = [];
    //   // for (let i = 0; i < this.tableData.length; i++) {
    //   //   if (this.tableData[i].name.indexOf(ruleForm.name) !== -1) {
    //   //     shuju.push(this.tableData[i]);
    //   //   }
    //   // }
    //   // console.log(shuju);
    //   // this.currList = JSON.parse(JSON.stringify(shuju));
    //   // if (ruleForm === "") {
    //   //   this.setCurrList(1);
    //   // }
    // },

    //批量删除
    del() {
      for (let s = 0; s < this.multipleSelection.length; s++) {
        for (let x = 0; x <= this.tableData.length; x++) {
          if (this.multipleSelection[s] === this.tableData[x]) {
            this.tableData.splice(x, 1);
            console.log(x, 1);
          }
        }
      }
    },
    // 跳转新增培训管理
    Newadditions() {
      this.$router.push({
        name: "劳动力新增",
      });
    },
  },

  //获取数据
  mounted() {
    // 搜索框1
    http.xmbzsearch({}).then((r) => {
      console.log(r);
      this.downinput = r.data;
      console.log("公司", this.downinput);
    });
    // 搜索框2
    http.getGroupName({}).then((r) => {
      console.log(r);
      this.downinput1 = r.data;
      console.log("班组", this.downinput1);
    });
    //
    http.getBuildPlanList({}).then((r) => {
      console.log(r);
      this.tableData = r.data;
      this.setCurrList(1);
      console.log("表格", this.tableData);
    });
  },
};
</script>
<style scoped>

.rygl-btn {
  margin-top: 10px;
  width: 100%;
  /* margin-top: 10px; */
  display: flex;
  justify-content: space-between;
}
.rygl-btn-right {
  margin-right: 25px;
}
/* 大容器 */
.y-conter {
  height: 640px;
  background-color:white;
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 15px;
  /* margin-left: 15px; */
  position: relative;
}
/* 表格 */
.y-biaoge {
  margin-top: 20px;
  margin-left: 30px;
}
.block1 {
  margin-left: 5px;
  height: 30px;
  display: inline-block;
  margin-top: 5px;
}

.y-table {
  width: 99%;
  margin-top: 15px;
}
/* 右侧新增导出按钮 */
.y-btn {
  position: absolute;
  top: 164px;
  left: 94%;
}
/* 所有按钮 */
.el-button {
  height: 30px;
  line-height: 0px;
}
/* 标题字体 */
.y-bold {
  font-weight: bold;
}

.el-select >>> .el-input__inner {
  width: 188px;
  height: 30px;
  padding-left: 5px;
}

.el-input >>> .el-input__inner {
  width: 188px;
  height: 30px;
}
.el-input >>> .el-input__icon {
  line-height: 30px;
}
.el-range-editor {
  width: 160px;
  height: 30px;
  padding-left: 10px;
}
.el-input >>> .el-range__icon {
  line-height: 0px;
  padding-left: 10px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 188px;
  margin-left: 5px;
}

.el-range-editor >>> .el-input__inner {
  width: 200px;
  height: 30px;
  margin-top: 10px;
}
.y-fenye {
  /* float: right;
  margin-top: 15px;
  margin-right: 15px; */
  position: absolute;
  right: 1%;
  bottom: 5px;
}
/* 新增 */

.el-form-item {
  margin-bottom: 2px !important;
}
</style>